<template>
 <div id="SlotRecommMV">
 
       <ul ref="sp" class="MVStyle" :class="{GDbox:data[0].type=='GD',spNowrap:spNowrap == 'LeftSP'}">

        <!-- 接收父级数据 -->
        <!-- MV 精选页面 推荐MV  DT 精选页面 主播电台 GD 歌单页面 全部订单 -->
        <li v-for="(items,index) in data" v-if="items.type == 'MV' || 'DT' || 'GD'||'LeftSP'"  
        :class="{MV:items.type == 'MV'||'LeftSP',DT:items.type == 'DT',GD:items.type == 'GD',spNowrap:items.type == 'LeftSP'}" 
        :spNowrap='items.type'
        :key="index"> 
            <img  :src="items.coverImgUrl" alt="">
            <span class="iconfont rightS" v-if="items.type == 'MV'|| 'GD'||'LeftSP'" >&#xea6d; 560 </span>
             <div class="time">6:00</div>
            <div class="title-box">
                
                <!-- 人数 -->
                <span class="iconfont" v-if="items.type ==  'GD'" >&#xe699;</span>
                <!-- 'DT'|| 'GD'显示 -->
                <span class="DTName " v-if="items.type !== 'LeftSP'">{{items.creator}} </span>
                 <span class="iconfont" v-if="items.type ==  'GD'" >&#xe699;</span>
               
            </div>
            <!-- 图片下的两行标题 -->
            <span style="font-size:18px;margin-top: 4px;">{{items.name}}</span>
            <!--items.type !== 'LeftSP' 左边导航栏的视频不显示 -->
             <span v-if="items.type !== 'LeftSP'" style="font-size:15px;margin-top: 4px;">
                {{items.title}}
            </span>
            <span></span>
        </li>

   
    </ul>
   
 </div>   
</template>

<script>
import '../../public/font_home/font-icon2/iconfont.js'
export default {
    data() {
        return {
            spNowrap:''
        }
    },
    props:{
        data:{
            typeof:Object || Array,
            
            default:_=>{
                return{}
            }
        },
        MV:{
            
        },
       
    },
     mounted() {
        //    this.spNowrap = this.data[1].type
        //    console.log(this.data)
        },
        methods: {
            
        }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#SlotRecommMV{
div,span,ul,li,img{
    font-size: 0;
}
// margin: 10px;

    overflow: hidden;
  
        .rightS{
              position: absolute;
              top: 5px;
          left: 80%;
            font-size: 16px;
              margin-bottom: 8px;
              color: white !important;
              font-weight: inherit;
    
    }
  
    h1{
        margin-bottom: 8px;
        color: #373737;
    }
    .spNowrap{
            flex-wrap: wrap !important;
    }
    .MVStyle{
        // height: 260px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        //  justify-content: center;/*水平居中*/
    // align-items: center;/*垂直居中*/
            span,img{
                display: block;
    width: 96%;

    color: #373737;
        }
        img{
             height:80%;
            border-radius: 2%;
        }
    }


     .MVStyle>.MV{
           position: relative;   
@media (min-width: 1100px) {
    flex: 0 0 33.3%;
    max-width: 33.3%;
} 
@media (min-width: 1800px) {
    flex: 0 0 25%;
    max-width: 25%;
} 
            
           height: 260px;
            box-sizing: border-box;
            // border: 1px solid #000;

     }
      .MVStyle>.DT{
          
           position: relative; 
        .DTName{
//         position: absolute;
 text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
    // left: 5px;
    // bottom: 60px;
        font-size: 16px;
        color: white;
        max-width: 85%;
        
    }  
@media (min-width: 1100px) {
    flex: 0 0 16.6%;
    max-width:16.6%;
} 

            
           height: 260px;
            box-sizing: border-box;
            // border: 1px solid #000;
    

     }
     .GDbox{
         display: wrap;
     }
         .MVStyle>.GD{
          
           position: relative; 
        .DTName{
//         position: absolute;
 text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
    // left: 5px;
    // bottom: 60px;
        font-size: 16px;
        color: white;
        max-width: 85%;
    }  
@media (min-width: 1100px) {
    flex: 0 0 20%;
    max-width:20%;
} 

            
           height: 270px;
            box-sizing: border-box;
            // border: 1px solid #000;
    

     }


        .time{
    font-size: 16px;
     color:white;
     position: absolute;
     bottom: 50px;
     right: 20px;
 }

     .title-box{
 
         display: flex;
       position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
        left: 5px;
    bottom: 60px;
 width: 100%;
span:first-child{
        width: 90%;
        font-size: 20px;
        color:white;
        font-weight: 100;
         text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
 }

     }

   
   }
   
 

</style>